<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style type="text/css">
		#div1, #div2 {
			float: left;
			width: 400px;
			height: 400px;
			margin: 10px;
			padding: 10px;
			border: 1px solid #AAA;
		}
	</style>
	<script type="text/javascript">
		function drag(ev){
			ev.dataTransfer.setData('Text', ev.target.id);
			console.log(ev.target.id);
		}

		function allowDrop(ev){
			ev.preventDefault();
		}

		function drop(ev){
			ev.preventDefault();
			let data = ev.dataTransfer.getData('Text');
			ev.target.appendChild(document.getElementById(data));
		}
	</script>
	<body>
		<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
			<img id="img1" src="img/1.jpg" draggable="true" ondragstart="drag(event)"/>
			<img id="img2" src="img/2.jpg" draggable="true" ondragstart="drag(event)"/>
		</div>
		<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)">
		</div>
	<div><script language="javascript">

	</script></div></body>
</html>
